<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>border-radius</title>
    <style>

        #d1 {
            height: 100px;
            width: 100px;
            border: red solid 0px;
            border-radius: 100px 0 0 0;
            margin: 30px;
            background-color: #FAACA8;
            background-image: linear-gradient(197deg, #FAACA8 0%, #DDD6F3 100%);
            box-shadow: 5px 5px 10px #b8b7b7;
        }

        #d2 {
            height: 200px;
            width: 100px;
            border: red solid 0px;
            border-radius: 100px 0 0 100px;
            margin: 30px;
            background-color: #21D4FD;
            background-image: linear-gradient(45deg, #21D4FD 0%, #B721FF 100%);
            box-shadow: 5px -5px 10px #b8b7b7;
        }

        #d3 {
            color: white;
            margin: 30px;
            text-align: center;
            line-height: 30px;
            width: 300px;
            height: 30px;
            border: 0px solid red;
            border-radius: 8px;
            margin: 20px;
            box-shadow: -5px -5px 10px #b8b7b7;
            /*box-shadow: inset 3px 3px 10px #06c;*/
            background-color: #8EC5FC;
            background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);

        }

        #d4 {
            border-radius: 300px 300px 300px 300px;
            margin: 30px;
            width: 300px;
            height: 300px;

            background-color: #FFFFFF;
            background-image: radial-gradient(circle, #FFFFFF 0%, #6284FF 50%, #FF0000 100%);
            float: left;
        }

        #d5 {
            border-radius: 300px 300px 300px 300px;
            margin: 30px;
            width: 300px;
            height: 300px;
            background-color: #08AEEA;
            background-image: radial-gradient(circle, #fa0101 0%, #08AEEA 0%, #2AF598 50%, #ffffff 100%);
            float: left;
        }


    </style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3">line line so easy, day day no bug!</div>
<div id="d4"></div>
<div id="d5"></div>
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>

</body>
</html>